<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
	$(':radio').change(
	  function(){
	    $('.choice').text( this.value + ' stars' );
	  } 
	)
</script>

<style>
	.star-rating {
	  font-size: 0;
	  white-space: nowrap;
	  display: inline-block;
	  width: 70px;
	  height: 14px;
	  overflow: hidden;
	  position: relative;
	  background: url('../images/star-grey.png');
	  background-size: contain;
	}
	.star-rating i {
	  opacity: 0;
	  position: absolute;
	  left: 0;
	  top: 0;
	  height: 100%;
	  width: 20%;
	  z-index: 1;
	  background: url('../images/star-green.png');
	  background-size: contain;
	}
	.star-rating input {
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  opacity: 0;
	  display: inline-block;
	  width: 20%;
	  height: 100%;
	  margin: 0;
	  padding: 0;
	  z-index: 2;
	  position: relative;
	}
	.star-rating input:hover + i,
	.star-rating input:checked + i {
	  opacity: 1;
	}
	.star-rating i ~ i {
	  width: 40%;
	}
	.star-rating i ~ i ~ i {
	  width: 60%;
	}
	.star-rating i ~ i ~ i ~ i {
	  width: 80%;
	}
	.star-rating i ~ i ~ i ~ i ~ i {
	  width: 100%;
	}
	.choice {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  text-align: center;
	  padding: 20px;
	  display: block;
	}
</style>

<span class="star-rating">
  <input type="radio" name="rating" value="1" /><i></i>
  <input type="radio" name="rating" value="2" /><i></i>
  <input type="radio" name="rating" value="3" checked="checked" /><i></i>
  <input type="radio" name="rating" value="4" /><i></i>
  <input type="radio" name="rating" value="5" /><i></i>
</span>

